<template>
  <div class="category">
    <div class="search">
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="cate_list">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="item in CategoryList"
            :key="item.id"
            :title="item.name"
          >
          </van-sidebar-item>
        </van-sidebar>
      </div>
      <div class="right">
        <div class="pic_box">
          <img :src="currentCategory.banner_url" alt="" />
          <h5>{{ currentCategory.front_name }}</h5>
        </div>
        <div>
          <h4>{{ currentCategory.name }}</h4>
          <van-grid :column-num="3" square>
            <van-grid-item
              v-for="item in currentCategory.subCategoryList"
              :key="item.id"
              :icon="item.wap_banner_url"
              :text="item.name"
            >
              <!-- <van-image :src="item.wap_banner_url" /> -->
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入分类页数据请求
import { getCategoryData, getCateCurrent } from "@/utils/http.js";
export default {
  data() {
    return {
      CategoryList: {}, //分类页左侧分类数组
      currentCategory: {}, //当前分类页对象
      activeKey: 0,
      // id: 1,
      value: "",
      name: "张三",
    };
  },
  methods: {
    //点击分类切换
    onChange() {
      // console.log(this.CategoryList.id);

      // console.log(this.activeKey);
      // console.log(this);
      let id = this.CategoryList[this.activeKey].id;

      //获取当前分类页的数据
      getCateCurrent(id).then((res) => {
        console.log(33, res);
        this.currentCategory = res.data.data.currentCategory;
      });
    },
  },
  created() {
    getCategoryData().then((res) => {
      // console.log(res.data.data);
      this.CategoryList = res.data.data.categoryList;
      this.currentCategory = res.data.data.currentCategory;
      console.log(this.currentCategory);
    });
  },
};
</script>

<style  lang='less'>
.cate_list {
  display: flex;
  .right {
    flex: 1;
    width: 100%;

    h4 {
      text-align: center;
    }
    h5 {
      font-size: 20px;
      text-align: center;
    }
    img {
      display: block;
      width: 100%;
    }
  }
}
</style>